<template>
    <div class="wrapper">
        <top-bar>
            <template v-slot:title>{{$t('Invitation reward')}}</template>
            <template v-slot:right>
                <div class="coin-num">{{inviteIncome}}</div>
            </template>
        </top-bar>
        <message-swiper class="swiper"></message-swiper>
        <div class="rules-icon" @click="rulesModalData.showModal">{{$t('Rules')}}</div>
        <div class="container">
            <div class="container-bg">
                <div class="top-icon" :style="{backgroundImage:`url(${topIcon})`}"></div>
                <div class="detail-panel">
                    <div :class="['button',{'pt':vueState.pageInfo.lang === 'pt'}]" @click="invite(true)"></div>
                    <div class="item">
                        <div class="num">{{invitedPerson}}</div>
                        <div class="title">{{$t('Invite No')}}</div>
                    </div>
                    <div class="item">
                        <div v-if="invitedPerson" class="transformation">
                            <div>
                                <div class="coin-num">{{inviteIncome}}</div>
                                <div class="rupee"><span class="sign">≈</span>{{vueState.countryInfo.currencySymbol}}{{(Math.floor(convertRupe * 100) / vueState.pageInfo.rate).toFixed(2)}}</div>
                            </div>
                        </div>
                        <div v-else class="num">0</div>
                        <div class="title">{{$t('Income')}}</div>
                    </div>
                </div>
                <div class="invite-tab">
                    <ul class="tab-header">
                        <li v-for="(item,index) in tab" :key="index" :class="{active:index===activeTab}" @click="activeTab = index">{{$t(item)}}</li>
                    </ul>
                    <div v-if="activeTab === 0" class="tab-panel">
                        <div class="ranking">
                            <div class="top-3">
                                <div v-for="(item,index) in rank.top" :key="index" :class="item">
                                    <div :class="`${item}-info`">
                                        <p class="id">ID:{{rank.list[index]?.id}}</p>
                                        <p class="no"><span class="user-num">{{rank.list[index]?.inviteUserNum}}</span></p>
                                        <p class="money"><span class="money-num">{{vueState.countryInfo.currencySymbol}}{{rank.list[index]?.earnMoney}}</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="list-wrapper">
                                <ul class="ranking-list">
                                    <li class="me-item">
                                        <div class="rank">?</div>
                                        <div class="id">ID:{{vueState.pageInfo.id}}</div>
                                        <div class="no"><span class="user-num">{{invitedPerson}}</span></div>
                                        <div class="money"><span class="money-num">{{vueState.countryInfo.currencySymbol}}{{Math.floor(convertRupe * 100) / 100}}</span></div>
                                    </li>
                                    <li v-for="(item,index) in rank.list.slice(3)" :key="index" class="ranking-list-item">
                                        <div class="rank">{{index+4}}</div>
                                        <div class="id">ID:{{item.id}}</div>
                                        <div class="no"><span class="user-num">{{item.inviteUserNum}}</span></div>
                                        <div class="money"><span class="money-num">{{vueState.countryInfo.currencySymbol}}{{item.earnMoney}}</span></div>
                                    </li>
                                </ul>
                            </div>
                            <div :class="['ranking-button',{'pt':vueState.pageInfo.lang === 'pt'}]" @click="invite(false)"></div>
                        </div>
                    </div>
                    <div v-if="activeTab === 1" class="tab-panel">
                        <van-list
                            :offset="100"
                            :class="['record-list',{'empty':!listData.list.length}]"
                            v-model:error="listData.error"
                            :error-text="$t('Request failed, click reload')"
                            v-model:loading="listData.loading"
                            :loading-text="`${$t('Loading')}...`"
                            :finished="listData.finished"
                            @load="getData"
                            :immediate-check="false"
                        >
                            <div v-if="!listData.list.length" class="empty-el" @click="invite(false)">
                                <div class="img"></div>
                                <div class="text">{{$t("You haven't invited a friend yet! Invite now!")}}</div>
                            </div>
                            <div v-for="(item,index) in listData.list" :key="index" class="record-list-item">
                                <div class="top">
                                    <div class="title">
                                        {{$t(textMap[item.taskType],[{msg:'$m',val:item.invitedUserId}])}}
                                        <!-- {{$t(titleText(item.taskType))(item.invitedUserId)}} -->
                                        </div>
                                    <div :class="['icon',item.taskType === 0 ? 'user' : 'task']"></div>
                                </div>
                                <div class="bottom">
                                    <div class="time">{{formatTime(item.createTime)}}</div>
                                    <div class="coin-num">{{item.coins}}</div>
                                </div>
                            </div>
                        </van-list>
                    </div>
                </div>
            </div>
        </div>
        <rules-modal v-model:show="rulesModalData.show"></rules-modal>
    </div>
</template>
<script>
import TopBar from '../../components/TopBar/index.vue'
import RulesModal from '../../components/Modal/InviteRuleModal.vue'
import MessageSwiper from '@@/components/MessageSwiper/index.vue'
import {CoinApi,UserApi} from '@@/api/api.js'
import {internationalConfig} from '@@/i18n/config.js'
import {reactive,inject,onMounted,toRefs,onUnmounted,computed} from 'vue'
export default {
    components:{
        TopBar,
        RulesModal,
        MessageSwiper
    },
    setup(){
        const vueState = inject('vueState')
        const state = reactive({
            listData:{
                error:false,
                loading:false,
                finished:false,
                pageNumber:1,
                pageSize:20,
                list:[]
            },
            rank:{
                top:['first','second','third'],
                list:[]
            },
            activeTab:0,
            tab:['Ranking','Record'],
            inviteIncome:0,
            invitedPerson:0,
            convertRupe:0,
            inviteInfo:{}
        })
        const rulesModalData = reactive({
            show:false,
            showModal:()=>{
                rulesModalData.show = true
            }
        })
        const titleText = (type)=> {
            switch (type) {
                case 0:
                    return 'inviteJoin'
                case 1:
                    return 'inviteTask'
                case 2:
                    return 'inviteSecond'
                default:
                    return ''
            }
        }
        const topIcon = computed(()=>{
            return internationalConfig.invitePage.topIcon[vueState.countryInfo.country] || internationalConfig.invitePage.topIcon['IN']
        })
        const getRanking = async()=> {
            try{
                const list = await UserApi.GetInviteRanking()
                state.rank.list = list
                console.log('res',state.rank);
            }catch(e){
                console.log(e);
            }
        }
        const getData = async ()=> {
            try{
                const res = await CoinApi.InviteProfitList({pageNumber:state.listData.pageNumber,pageSize:state.listData.pageSize})
                state.inviteIncome = res.inviteIncome
                state.invitedPerson = res.invitedPerson
                state.convertRupe = res.convertRupe / 100
                state.listData.list = state.listData.list.concat(res.list)
                if(state.listData.pageNumber < res.pageCount){
                    state.listData.loading = false
                    state.listData.pageNumber ++
                }else{
                    state.listData.finished = true
                }
            }catch(e){
                console.log(e);
                state.listData.loading = false
                state.listData.error = true
            }
        }
        const refreshData = ()=> {
            state.listData.list = []
            state.listData.pageNumber = 1
            getData()
        }
        const invite = (track=false)=> {
            track && window.trackEvent({pageTitle:'invitePage',ev:'clickinvite'})
            window.SDKPostMessage({
                event:'h5_share_req',
                data:{
                    channel:'whatsapp'
                }
            })
            
        }
        const formatTime = (time)=> {
            const date = new Date(time)
            return `${date.getFullYear()}/${date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1}/${date.getDate() < 10 ? '0'+date.getDate() : date.getDate()} ${date.getHours() < 10 ? '0'+date.getHours() : date.getHours()}:${date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()}:${date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds()}`
        }

        
        onMounted(()=>{
            console.log();
            window.trackEvent({pageTitle:'invitePage',ev:'showinvitepage'})
            window.AdSDK.addEventListener('ad_show',refreshData)
            window.SDKPostMessage({
                event:'h5_life_event',
                data:{
                    page:'invite',
                    event:'open'
                }
            })
            vueState.EventEmitter.immediately('afterRegist',()=>{
                getData()
                getRanking()
            },vueState.pageStatus.afterRegist)
        })
        onUnmounted(()=>{
            window.AdSDK.removeEventListener('ad_show',refreshData)
            window.SDKPostMessage({
                event:'h5_life_event',
                data:{
                    page:'invite',
                    event:'closed'
                }
            })
        })
        return {
            ...toRefs(state),
            rulesModalData,
            invite,
            getData,
            vueState,
            formatTime,
            topIcon,
            titleText
        }
    }
}
</script>
<style lang="less" scoped>

.wrapper{
    height: 100%;
    position: relative;
    .swiper{
        position: absolute;
        top: 0;
        z-index: 9;
    }
    .rules-icon{
        width: .64rem;
        height: .32rem;
        background: #000000;
        border-radius: 1rem 0 0 1rem;
        position: absolute;
        right: 0;
        top: .46rem;
        line-height: .32rem;
        padding-right: .04rem;
        text-align: right;
        font-size: .16rem;
        font-weight: 600;
        color:#FFE197;
        z-index: 9;
    }
    .coin-num{
        background: url(../../assets/images/icon_coin.svg) no-repeat left center;
        background-size: .2rem .2rem;
        padding-left: .24rem;
        line-height: .2rem;
        font-size: .17rem;
        font-weight: 500;
        color: #F9BC00;
    }
    .container{
        height: 100%;
        overflow-y: auto;
        position: relative;
        
        &-bg{
            background: url(../../assets/images/invite_bg.jpg) no-repeat top center;
            background-size: 100%;
            background-color:#4C17C5;
        }
        .top-icon{
            height: 3.55rem;
            width: 3.6rem;
            background: url(../../assets/images/invite_top.png) no-repeat center;
            background-size: contain;
            margin: 0 auto;
        }
        .detail-panel{
            height: 1.32rem;
            width: 3.26rem;
            background: url(../../assets/images/invite_border.png) no-repeat center;
            background-size: contain;
            padding: .29rem .1rem .43rem;
            margin: 0 auto;
            display: flex;
            position: relative;
            .button{
                position: absolute;
                left: 50%;
                bottom:-.42rem;
                transform: translateX(-50%);
                height: .72rem;
                width:2.26rem;
                background: url(../../assets/images/invite_btn.png) no-repeat center;
                background-size: contain;
                &.pt{
                    background-image: url(../../assets/images/invite_btn_br.png);
                }
                &::after{
                    content: '';
                    display: block;
                    height: .51rem;
                    width: .54rem;
                    background: url(../../assets/images/hand.png) no-repeat center;
                    background-size: contain;
                    position: absolute;
                    right: .3rem;
                    bottom: -.08rem;
                    transform: translate(50%,50%);
                    animation: hand 1s infinite;
                }
            }
            .item{
                flex-basis: 50%;
                border-right:.01rem solid #eaad64;
                &:last-child{
                    border-right: 0;
                }
                .num{
                    text-align: center;
                    font-size: .32rem;
                    font-weight: 600;
                    line-height: .44rem;
                    color: #D62A1C;
                }
                .transformation{
                    display: flex;
                    justify-content: center;
                    .coin-num{
                        line-height: .24rem;
                        font-size: .24rem;
                        color:#D62A1C;
                    }
                    .rupee{
                        line-height: .2rem;
                        font-size:.16rem;
                        color:#657221;
                        .sign{
                            color: #333333;
                            width: .2rem;
                            display: inline-block;
                            text-align: center;
                            margin-right: .04rem;
                        }
                    }
                }
                .title{
                    margin-top: .04rem;
                    text-align: center;
                    font-size: .14rem;
                    font-weight: 600;
                    color:#A4A4A4;
                }
            }
        }
        .invite-tab{
            margin-top: .7rem;
            .tab-header{
                padding: 0 .48rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                li{
                    height: .3rem;
                    width: 1.28rem;
                    border-radius: .18rem;
                    background-color: transparent;
                    color: white;
                    font-size:.16rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    &.active{
                        background-color: rgba(255,255,255,0.30);
                    }
                }
            }
        }
        .record-list{
            margin-top: .2rem;
            padding: 0 .3rem .18rem;
            &.empty{
                padding-bottom: .32rem;
                /deep/ .van-list__finished-text{
                    display: none;
                }
                .empty-el{
                    .img{
                        height: .9rem;
                        width: 1.68rem;
                        background: url(../../assets/images/invite_list_empty.png) no-repeat center;
                        background-size: contain;
                        margin: 0 auto;
                    }
                    .text{
                        margin-top: .25rem;
                        text-align: center;
                        font-size: .16rem;
                        font-weight: 600;
                        color:#C1C1C1;
                        height: .21rem;
                        line-height: .21rem;
                    }
                }
            }
            &-item{
                margin-top: .08rem;
                padding: .12rem .24rem;
                background-color: white;
                border-radius: .16rem;
                &:first-child{
                    margin-top: 0;
                }
                .top{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .title{
                        font-size: .14rem;
                        font-weight: 500;
                        color:#FF2A14;
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .icon{
                        height: .24rem;
                        width: .22rem;
                        &.user{
                            background: url(../../assets/images/invite_list_user.png) no-repeat center;
                            background-size: contain;
                        }
                        &.task{
                            background: url(../../assets/images/invite_list_task.png) no-repeat center;
                            background-size: contain;
                        }
                        
                    }
                }
                .bottom{
                    margin-top: .08rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .time{
                        font-size: .12rem;
                        font-weight: 500;
                        color: #666666;
                    }
                    .coin-num{
                        font-size: .2rem;
                        font-weight: 500;
                        color:#F94200;
                        background: url(../../assets/images/icon_coin.svg) no-repeat left center;
                        background-size:.16rem .16rem;
                        padding-left: .2rem;
                    }
                }
            }
        }
        .ranking{
            margin-top: .84rem;
            padding-bottom:.5rem;
            .user-num{
                background: url(../../assets/images/invite_list_user.png) no-repeat left center;
                background-size:.12rem .12rem;
                padding-left: .16rem;
            }
            .money-num{
                background: url(../../assets/images/icon_money.png) no-repeat left center;
                background-size:.12rem .12rem;
                padding-left: .16rem;
            }
            .top-3{
                height:1.24rem;
                width:3.21rem;
                background: url(../../assets/images/ranking_top.png) no-repeat center;
                background-size: contain;
                margin: 0 auto;
                position: relative;
                .first-info,.second-info,.third-info{
                    font-weight: 500;
                    color: white;
                    .id{
                        text-align: center;
                        font-size: .16rem;
                    }
                    .no{
                        margin-top: .1rem;
                        font-size:.14rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .money{
                        margin-top: .08rem;
                        font-size:.12rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
                .second-info{
                    .id{font-size: .12rem;}
                }
                .third-info{
                    .id{font-size: .12rem;}
                    .no{margin-top: .06rem;}
                    .money{margin-top: .04rem;}
                }
                .first{
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%,-100%);
                    top: -.04rem;
                    width: 1.06rem;
                    height: .6rem;
                    background: url(../../assets/images/ranking_first.png) no-repeat center;
                    background-size: contain;
                    &-info{
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: .97rem;
                    }
                }
                .second{
                    position: absolute;
                    left:.12rem;
                    top:-.2rem;
                    width: .79rem;
                    height: .45rem;
                    background: url(../../assets/images/ranking_second.png) no-repeat center;
                    background-size: contain;
                    &-info{
                        position: absolute;
                        left: .1rem;
                        top: .73rem;
                    }
                }
                .third{
                    position: absolute;
                    right: .2rem;
                    top:.05rem;
                    width: .59rem;
                    height: .34rem;
                    background: url(../../assets/images/ranking_third.png) no-repeat center;
                    background-size: contain;
                    &-info{
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: .57rem;
                    }
                }
            }
            .list-wrapper{
                padding: 0 .2rem;
                margin-top: -.02rem;
                position: relative;
            }
            &-list{
                background: url(../../assets/images/ranking_bg.png) no-repeat center;
                background-size: cover;
                li{
                    display: flex;
                    font-size: .14rem;
                    height: .4rem;
                    &>div{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .rank{width: 12%;}
                    .id{width: 25%;}
                    .no{width: 36%;}
                    .money{width: 27%;}
                }
                .me-item{
                    background: linear-gradient(90deg,#4b33a6, #3425a3);
                    color:#FFC704;
                    .money{color: #53F276;}
                }
                &-item{
                    color: white;
                    border-bottom: .01rem solid;
                    border-image: url(../../assets/images/ranking_border.png) 3 repeat;
                }
            }
            &-button{
                margin:.24rem auto 0;
                width: 2.02rem;
                height: .48rem;
                background: url(../../assets/images/ranking_invite_btn.png) no-repeat center;
                background-size: contain;
                &.pt{
                    background-image: url(../../assets/images/ranking_invite_btn_br.png);
                }
            }
            
        }
    }
}
@keyframes hand {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
        transform: translate(-50%,10%);
    }
}
</style>